<template>
  <div id="app">
    <MyHeaderVue title="GoodesList商品列表" color="white" />
    <div style="padding-top: 45px">
      <MyGoodsListVue />
    </div>
  </div>
</template>

<script>


// 目标：项目创建和转呗
// 1.vue create 
// 2.清空欢迎页面，关闭eslint代码检查
// 3.分析页面拆分组件，复用之前的myheader.vue，新建mytable.vue
// 4.建立页面组件，Src/viees/mygoodelist.vue
// 5.赋值md里，MyTableVue.vue里标签和样式
// 6.下载需要的包 less less-loader#5.0.0bootstrap axios


// 目标2：页面展示出来
// 1.MyGoodsListVue商品列表页面导入app.vue中显示
// 2.MyHeaderVue头部导航导入app.vue中显示
// 3.mytable.vue引入MyGoodsListVue中显示
// 样式问题：
// 1.main.js引入bootstrap.css
// 2.app,vue中给mugoodslist外面套一个div，设置padding-top即可
// 4.mygoodslist.vue中，使用aixos去请求数据，铺设到表格里

// 需求3: 插槽技术
// 目的: MyTable组件更加的灵活
// 3.0 列标题, 抽离出来, slot占位name="header"
// 3.1 template #header传入具体th标签
// 3.2 tbody里, slot占位 (tr和v-for放在里面)
// 3.3 template #body传入具体td占内容

// 需求4: 添加Tag
// 4.0 准备input和button按钮(md里复制)
// 4.1 点击按钮, 实现input出现, button消失(v-if和v-else)
// 4.2 自定义fofo指令-实现输入框自动聚焦
// 4.3 监听input失去焦点, 让按钮出现
// 4.4 v-model绑定输入框 对象.inputValue属性收集用户的值
// 4.5 监听回车按键, 无值提示, 有值加到tag数组里
// 4.6 监听esc按键, 清空输入框内容

import MyGoodsListVue from "./views/MyGoodsList.vue"
import MyHeaderVue from "./components/MyHeader.vue"
export default {
  name: 'App',
  components: {
    MyGoodsListVue,
    MyHeaderVue
  }
}
</script>

<style>
</style>
